<template>
	<view id="infoSearch">
		<!-- 检测信息追踪 -->
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<view class="welcome">
					<view><text>姓名：{{ userInfo.nickName }}</text></view>
					<view><text>单位：{{ userInfo.dept.deptName }}</text></view>
				</view>
			</view>
		</view>

		<view class="infoList" v-if="form.project.name != ''">
			<view class="title">
				<text>基本信息</text>
				<uni-tag class="project-status" :text="form.stateName" type="warning" size="small" v-if="form.state == 0" />
				<uni-tag class="project-status" :text="form.stateName" type="warning" size="small" v-if="form.state == 2" />
				<uni-tag class="project-status" :text="form.stateName" type="warning" size="small" v-if="form.state == 3" />
				<uni-tag class="project-status" :text="form.stateName" type="primary" size="small" v-if="form.state == 4" />
				<uni-tag class="project-status" :text="form.stateName" type="royal" size="small" v-if="form.state == 6" />
				<uni-tag class="project-status" :text="form.stateName" type="royal" size="small" v-if="form.state == 8" />
				<uni-tag class="project-status" :text="form.stateName" type="success" size="small" v-if="form.state == 9" />
			</view>
			<uni-list>
				<uni-list-item title="工程名称" :rightText="form.project.name" />
				<uni-list-item title="委托单位" :rightText="form.order?form.order.entrustUnitName:''" />
				<uni-list-item title="检测项目" :rightText="form.sampling.typeName" />
				<uni-list-item title="送检类别" rightText="见证取样" />
				<uni-list-item title="二维码编号" :rightText="form.sampling.qrCode" />
				<uni-list-item title="报告编号" :rightText="form.reportCode" />
			</uni-list>
			<uni-collapse accordion v-model="activeName">
				<uni-collapse-item title="取样过程" name="1">
					<view class="title"><text>人脸识别</text></view>
					<view class="box">
						<view class="column-img" @click="previewImg(1, 0)" v-if="form.sampling.userPhotos.length>0">
							<image :src="form.sampling.userPhotos[0].url" mode="heightFix" style="height: 120px;"></image>
							<text>取样人员</text>
						</view>
						<view class="column-img" @click="previewImg(1, 1)" v-if="form.witness.userPhotos.length>0">
							<image :src="form.witness.userPhotos[0].url" mode="heightFix" style="height: 120px;"></image>
							<text>见证人员</text>
						</view>
					</view>
					<view class="title" v-if="form.sampling.longitude"><text>取样定位信息</text></view>
					<view style="display: flex; justify-content: center; align-items: center; overflow: hidden;">
						<map
							:latitude="form.sampling.latitude" 
							:longitude="form.sampling.longitude" 
							:markers="covers"
							v-if="form.sampling.longitude && activeName == '1'"
						></map>
					</view>
					<view class="title" v-if="form.witness.longitude"><text>见证定位信息</text></view>
					<view style="display: flex; justify-content: center; align-items: center; overflow: hidden;">
						<map
							:latitude="form.witness.latitude" 
							:longitude="form.witness.longitude" 
							:markers="covers1"
							v-if="form.witness.longitude && activeName == '1'"
						></map>
					</view>
					<view class="title"><text>二维码试件</text></view>
					<view class="box">
						<view class="column-img" @click="previewImg(2, 0)" v-if="form.sampling.qrCodePhotos.length>0">
							<image :src="form.sampling.qrCodePhotos[0].url" mode="heightFix" style="height: 120px;"></image>
							<text>取样二维码试件</text>
						</view>
						<view class="column-img" @click="previewImg(2, 1)" v-if="form.witness.qrCodePhotos.length>0">
							<image :src="form.witness.qrCodePhotos[0].url" mode="heightFix" style="height: 120px;"></image>
							<text>见证二维码试件</text>
						</view>
					</view>
					<view class="title" v-if="form.witness.quyangFiles && form.witness.quyangFiles.length>0"><text>取样过程照片</text></view>
					<view class="box">
						<view class="column-img" @click="previewImg(6, 0)" v-if="form.witness.quyangFiles && form.witness.quyangFiles.length>0">
							<image :src="form.witness.quyangFiles[0].url" mode="heightFix" style="height: 120px;"></image>
							<text>取样二维码试件</text>
						</view>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="封样过程" name="2">
					<view>
						<view class="title"><text>样品试件</text></view>
						<view class="box">
							<view class="column-img" v-if="form.sampling.specimenPhotos">
								<view class="box-nav">
									<view class="box-nav">
										<view 
											v-for="(item, index) in form.sampling.specimenPhotos"
											:key="item.id"
											class="box-nav-item" 
											@click="previewImg(3, index)"
										>
											<image :src="item.url" mode="widthFix" style="width: 64px;height: 64px;"></image>
										</view>
									</view>
								</view>
								<text>取样人员样品试件</text>
							</view>
						</view>
						<view class="box">
							<view class="column-img" v-if="form.witness.specimenPhotos.length>0">
								<view class="box-nav">
									<view 
										v-for="(item, index) in form.witness.specimenPhotos"
										:key="item.id"
										class="box-nav-item" 
										@click="previewImg(4, index)"
									>
										<image :src="item.url" mode="widthFix" style="width: 64px;height: 64px;"></image>
									</view>
								</view>
								<text>见证人员样品试件</text>
							</view>
						</view>
						<view class="title"><text>试件音视频</text></view>
						<view class="box">
							<view class="column-img" v-if="form.sampling.videoFiles.length>0 && activeName == '2'">
								<view style="width: 300px;height: 160px;margin: 10px;">
									<video controls id="samplevideo" :src="form.sampling.videoFiles[0].url" style="width: 300px;height: 160px;" />
								</view>
								<text>取样人员音视频</text>
							</view>
						</view>
						<view class="box">
							<view class="column-img" v-if="form.witness.videoFiles.length>0 && activeName == '2'">
								<view style="width: 300px;height: 160px;margin: 10px;">
									<video controls id="checkvideo" :src="form.witness.videoFiles[0].url" style="width: 300px;height: 160px;" />
								</view>
								<text>见证人员音视频</text>
							</view>
						</view>
						<view class="title"><text>样品参数</text></view>
						<uni-list>
							<uni-list-item title="原材料" :rightText="form.sampling.materialName" />
							<uni-list-item 
								v-for="(item,index) in form.sampling.formFillValues" 
								:title="item.name" 
								:rightText="item.value" 
							/>
						</uni-list>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="委托单" name="3">
					<view
						class="dowmload-text"
						v-if="form.order && form.order.orderFile"
						@click="toPath(form.order.orderFile.url)"
					>
						<!-- {{ form.order.orderFile.realName }} -->委托单.pdf
					</view>
				</uni-collapse-item>
				<uni-collapse-item  name="4" title="收样过程">
					<view class="box">
						<view class="column-img" @click="previewImg(5, 0)" v-if="form.sampling.songyPhotos && form.sampling.songyPhotos.length>0">
							<image :src="form.sampling.songyPhotos==null?'':form.sampling.songyPhotos.length>0?form.sampling.songyPhotos[0].url:''" mode="heightFix" style="height: 120px;"></image>
							<text>送检员</text>
						</view>
						<view class="column-img" @click="previewImg(5, 1)" v-if="form.sampling.songyJzPhotos && form.sampling.songyJzPhotos.length>0">
							<image :src="form.witness.songyJzPhotos==null?'':form.witness.songyJzPhotos.length>0?form.witness.songyJzPhotos[0].url:''" mode="heightFix" style="height: 120px;"></image>
							<text>送检见证人员</text>
						</view>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="检测报告" name="5">
					<view 
						class="dowmload-text"
						v-if="form.report && form.report.reportFile"
						@click="toPath(form.report.reportFile.url)"
					>
						<!-- {{ form.report.reportFile.realName }} -->检测报告.pdf
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<!-- 暂无数据 -->
		<view style="text-align: center;margin: 10px;" v-else><text>暂无数据</text></view>
	</view>
</template>

<script>
import { getSampleInfo } from '@/api/sampleCheck/index';
import { decrypt } from '@/common/jsencrpty.js';

export default {
	data() {
		return {
			activeName: '',
			userInfo: {},
			projectInfo: {},
			form: {
				state: 0,
				stateName: '',
				project: {
					name: ''
				},
				sampling: {
					qrCode: '',
					typeName: '',
					userPhotos: [],
					qrCodePhotos: [],
					specimenPhotos: [],
					videoFiles: []
				},
				witness: {
					userPhotos: [],
					qrCodePhotos: [],
					specimenPhotos: [],
					videoFiles: []
				},
				report: undefined
			},
			covers: [
				{
					latitude: 29.563458,
					longitude: 106.58362,
					width: 48,
					height: 48,
					iconPath: '../../static/img/location.png'
				}
			],
			covers1: [
				{
					latitude: 29.563458,
					longitude: 106.58362,
					width: 48,
					height: 48,
					iconPath: '../../static/img/location.png'
				}
			]
		};
	},
	onLoad(params) {
		this.userInfo = uni.getStorageSync('userInfo');
		this.userInfo.nickName = decrypt(this.userInfo.nickName)
		this.projectInfo = uni.getStorageSync('projectInfo');
		this.getSampleInfo(params.qrCode)
	},
	methods: {
		getSampleInfo(qrCode) {
			getSampleInfo(qrCode).then(res => {
				console.log(res.data,'res.data')
				if (res.data) {
					this.form.state = res.data.state
					this.form.stateName = res.data.stateName
					if (res.data.project) {
						this.form.project = res.data.project
					}
					if (res.data.sampling) {
						this.form.sampling = res.data.sampling
						this.covers[0].longitude = this.form.sampling.longitude
						this.covers[0].latitude = this.form.sampling.latitude
					}
					if (res.data.witness) {
						this.form.witness = res.data.witness
						this.covers1[0].longitude = this.form.witness.longitude
						this.covers1[0].latitude = this.form.witness.latitude
					}
					if (res.data.order) {
						this.form.order = res.data.order
					}
					if (res.data.report) {
						this.form.report = res.data.report
					}
				}
				
			});
		},
		previewImg(type, index) {
			let imgsArray = []
			if (type == 1) {
				if (this.form.sampling.userPhotos.length>0) {
					imgsArray.push(this.form.sampling.userPhotos[0].url)
				}
				if (this.form.witness.userPhotos.length>0) {
					imgsArray.push(this.form.witness.userPhotos[0].url)
				}
			} else if (type == 2) {
				if (this.form.sampling.qrCodePhotos.length>0) {
					imgsArray.push(this.form.sampling.qrCodePhotos[0].url)
				}
				if (this.form.witness.qrCodePhotos.length>0) {
					imgsArray.push(this.form.witness.qrCodePhotos[0].url)
				}
			} else if (type == 3) {
				this.form.sampling.specimenPhotos.forEach(item=>{
					imgsArray.push(item.url)
				})
			} else if (type == 4) {
				this.form.witness.specimenPhotos.forEach(item=>{
					imgsArray.push(item.url)
				})
			} else if (type == 5) {
				imgsArray.push(require('@/static/img/info/p1.png'))
				imgsArray.push(require('@/static/img/info/p2.png'))
			} else {
				this.form.witness.quyangFiles.forEach(item=>{
					imgsArray.push(item.url)
				})
			}
			uni.previewImage({
				current: index,
				urls: imgsArray
			})
		},
		toPath(url) {
			console.log(url,1231)
			uni.navigateTo({
				url: '/pages/qualityReport/CheckReport?path='+url
			});
		}
	}
};
</script>
<style lang="scss" scoped>
	#infoSearch {
		overflow: hidden;
		min-height: 100vh;
		background-color: #fafafa;
		
		.nav-box {
			width: 100vw;
			height: 160px;
			margin-top: -44px;
			padding: 56px 20px 56px 20px;
			background-image: url('../../static/img/home/head-bg.png');
		
			.nav-box-text {
				height: 50px;
				display: flex;
				align-items: center;
		
				.person {
					width: 48px;
					height: 48px;
				}
				.welcome {
					color: #333;
					font-size: 32rpx;
					margin-left: 40rpx;
				}
			}
		}
		
		.infoList {
			margin-top: -46px;
			
			.title {
				font-size: 14px;
				padding: 10px 20px;
				position: relative;
				
				&::before {
					top: 11px;
					left: 10px;
					content: '';
					width: 4px;
					height: 16px;
					position: absolute;
					border-radius: 10px;
					background-color: #2979ff;
				}
				.project-status {
					margin-left: 20px;
				}
			}
			
			.dowmload-text {
				color: #409EFF;
				padding: 5px 20px;
			}
			
			.box {
				display: flex;
				padding: 0 20px 12px 20px;
				justify-content: space-around;
				
				.column-img {
					display: flex;
					min-width: 68px;
					align-items: center;
					flex-direction: column;
					
					text {
						margin-top: 7px;
					}
				}
				.box-nav {
					display: flex;
					justify-content: flex-start;
					
					.box-nav-item {
						margin: 2px;
					}
				}
			}
			/deep/ .uni-list-item__content {
				flex: 0 0 auto;
			}
			/deep/ .uni-list-item__extra {
				flex: 1 1 auto;
			}
		}
	}
</style>
